<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div class="experienceStore_box">
                <!--<div class="income_box">
                    <p class="title">收益区</p>
                    <p>程序员正在努力开发中</p>
                </div>-->
                <div class="income_box" @click="$router.push('/experienceStore/profit')">
                    <p class="title">收益区</p>
                    <p>总收益金额：￥{{profit || '0.00'}}</p>
                </div>
                <div class="sample_box">
                    <p class="title">样品区</p>
                    <p>程序员正在努力开发中</p>
                </div>
                <div class="purchase_box">
                    <p class="title">采购区</p>
                    <p>程序员正在努力开发中</p>
                </div>
                <p class="more">了解更多，请扫描二维码加微信进行咨询</p>
                <p class="moreText" @click="showQr">点击扫描二维码</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'experienceStore',
        data(){
            return {
                qrImg:require('../../assets/img/qrImg_big.png'),
                profit: 0
            }
        },
        activated: function(){
            let dom = document.querySelector('.vux-alert .weui-dialog__bd')
            dom.classList.add('experienceStore_bd')
            this.profit = 0
            this.experienceStoreRebateInfo()
        },
        deactivated: function(){
            let dom = document.querySelector('.vux-alert .weui-dialog__bd')
            dom.classList.remove('experienceStore_bd')
        },
        methods:{
            showQr(){
                this.$vux.alert.show({
                    title: '二维码',
                    // content: '<div style="margin: 0 auto"><img src="https://files.shbs008.com/images/spareSpace/2018-07-06/464861011720011776.png" style="width: 3.12rem;height: 4.27rem" alt=""></div>',
                    content: '<div style="margin: 0 auto;"><img src="https://files.shbs008.com/images/spareSpace/2018-07-06/464861096323317760.png" style="display:block;margin: 0 auto;width: 4.94rem;height: 4.94rem" alt=""></div>',
                    onShow () {
                        console.log('Plugin: I\'m showing')
                    },
                    onHide () {
                        console.log('Plugin: I\'m hiding')
                    }
                })
            },
            experienceStoreRebateInfo(){
                this.$ajax.finance.experienceStoreRebateInfo()
                    .then(res => {
                        this.profit = res.body.content.experienceTotalProfitAmount
                    })
            }
        }
    }
</script>
<style>
    .weui-dialog__bd.experienceStore_bd{
        padding-left: 0;
        padding-right: 0;
    }
</style>
<style lang="less" scoped>

    .experienceStore_box{
        width: 100%;
        height: 100%;
        padding: 0.52rem 0 .26rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        & > div{
            padding: .74rem 0 0 .68rem;
            font-size: .26rem;
            color: #999;
            &:last-of-type{
                margin-bottom: 1.4rem;
            }
            .title{
                font-size: .42rem;
                color: #031790;
                margin-bottom: .56rem;
            }
        }
    }
    .income_box{
        width: 6.8rem;
        height: 3rem;
        background: url("../../assets/img/income_box.png") no-repeat;
        background-size: 100% 100%;
    }
    .sample_box{
        width: 6.8rem;
        height: 3rem;
        background: url("../../assets/img/sample_box.png") no-repeat;
        background-size: 100% 100%;
    }
    .purchase_box{
        width: 6.8rem;
        height: 3rem;
        background: url("../../assets/img/purchase_box.png") no-repeat;
        background-size: 100% 100%;
    }
    .more{
        font-size: .24rem;
        color: #999;
        margin-bottom: 0.2rem   ;
    }
    .moreText{
        font-size: .24rem;
        color: #0899ff;
        text-decoration: underline;
    }
</style>